<template>
  <el-container>
    <!-- 表单位置 -->
    <div class="leftDiv">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button type="primary" @click="dialogVisible = true">新增角色</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="testGetData">获取数据</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">新增角色</el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%" :row-class-Name="tableRowClassName">
        <el-table-column prop="Id" label="Id" width="180"></el-table-column>
        <el-table-column prop="Name" label="角色名" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="EditRow(scope.$index, tableData)"
              type="text"
              size="small"
            >编辑</el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="RightTree">
      <el-tree
        ref="RefRighTree"
        :data="rightsTree"
        show-checkbox
        node-key="id"
        :current-node-key="current"
        :props="defaultProps"
        default-expand-all
      ></el-tree>
    </div>
    <el-dialog title="创建角色" :visible.sync="dialogVisible" width="30%">
      <span></span>
      <el-input placeholder="请输入角色名" size="small" v-model="inputName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableRowClassName: '',
      dialogVisible: false,
      current: null,
      inputName: '',
      tableData: [
        // {
        //   Id: '1',
        //   Name: '王小虎'
        // },
      ],
      rightsTree: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    testGetData() {
      console.log(this.$refs['RefRighTree'].getCheckedKeys())
    },
    EditRow(index, data) {
      console.log(index, data)
      //请求数据 获取
    },
    deleteRow(index, data) {
      this.$confirm('确认要删除角色？')
        .then(_ => {
          console.log(index, data)
          this.axios
            .delete('/User/DeleteRole', { data: { data: data[index].Id } })
            .then(e => {
              this.getBaseData()
            })
        })
        .catch(_ => {})
    },
    addRole() {
      console.log(this.inputName)
      this.axios
        .post('/User/CreatRole', {
          name: this.inputName
        })
        .then(e => {
          this.getBaseData()
        })
      this.dialogVisible = false
    },
    getBaseData() {
      this.axios.get('/User/GetAllRole').then(e => {
        this.tableData = e.data
      })
    }
  },
  created() {
    this.getBaseData()
  }
}
</script>

<style lang="stylus">
.leftDiv
  float left
  width 30%
  height calc(100vh - 60px)
.left_bar
  background-color transparent
  height 100%
  background-color gray
  color aliceblue
.el-row
  margin-top 20px
.el-tree
  height 100%
.el-tree-node .el-tree-node
  float left
.RightTree .el-tree-node .el-tree-node__content:hover
  background transparent
.RightTree .el-tree-node .el-tree-node:not(:first-child) .el-tree-node__content
  padding-left 0px !important
.RightTree
  float left
  width 70%
  height calc(100vh - 60px)
  background-color #120
  padding-left 0px !important
</style>
